﻿@model TagCloudViewModel
<article id="tags">
    <header>
        <h3 id="tags-title">
            Tags <span id="tags-click">Click here!</span>
        </h3>
    </header>
    <div id="tags-cloud" data-show="false">
        @if (Model.Items.Count == 0)
        {
            <div>
                No tags exists.</div>
        }
        else
        { 
            <ul>
                @foreach (var item in Model.Items)
                {
                    <li class="tagcloud tagcloud-@Model.Rate(item.Value)">@Html.ActionLink(item.Key.Name, "Index", "Tag", new { name = item.Key.EncodedName }, null)@*<a href="/Tag/@item.Key.EncodedName">@item.Key.Name</a>*@</li>    
                }
            </ul>
        }
    </div>
    <script type="text/javascript">
        var data = { "tagsTitle": $("#tags-title"), "tagsCloud": $("#tags-cloud") };
        data.tagsTitle.click(data, function (e) {
            var tagsTitle = e.data.tagsTitle;
            var tagsCloud = e.data.tagsCloud;
            if (window.innerWidth < 1000) {
                if (tagsCloud.data("show") == false) {
                    tagsCloud.data("show", true);
                    tagsCloud.slideDown();
                    $("#about-click", tagsTitle).hide();
                } else {
                    tagsCloud.data("show", false);
                    tagsCloud.slideUp();
                    $("#about-click", tagsTitle).show();
                }
            }
        });
        $(window).resize(data, function (e) {
            var tagsTitle = e.data.tagsTitle;
            var tagsCloud = e.data.tagsCloud;
            if (e.target.innerWidth >= 1000) {
                tagsCloud.show();
            } else {
                if (tagsCloud.data("show") == false) {
                    tagsCloud.hide();
                    $("#about-click", tagsTitle).show();
                } else {
                    tagsCloud.show();
                    $("#about-click", tagsTitle).hide();
                }
            }
        });
    </script>
</article>